<template>
    <!-- 普通支付订单 -->
    <div class="store-list">
        <!-- 导航 -->
        <tz-breadcrumb  :pathArr='[{"name": "商家"},{"name": "商家列表", "url": "/storeList"}]'></tz-breadcrumb>
        <!-- 搜索表单 -->
        <el-form :inline="true" :model="formInline" class="form" label-position="left" label-width="80px" >
          <el-row :gutter="0">
            <el-col :xs="20" :sm="20" :md="20" :lg="21" :xl="21">
              <!-- 商家名称 -->
              <el-form-item label="商家ID">
                <el-input v-model="formInline.store_code" placeholder=""></el-input>
              </el-form-item>
              <!-- 商家名称 -->
              <el-form-item label="商家名称">
                <el-input v-model="formInline.name" placeholder=""></el-input>
              </el-form-item>
              <!-- 商家类型 
              <el-form-item label="商家类型">
                <el-select v-model="formInline.payType" placeholder="商家类型">
                  <el-option v-for="item in payTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <br>-->
              <!-- 负责人 -->
              <el-form-item label="负责人">
                <el-input v-model="formInline.chargeMen" placeholder=""></el-input>
              </el-form-item>
              <!-- 联系电话 -->
              <el-form-item label="联系电话">
                <el-input v-model="formInline.phone" placeholder=""></el-input>
              </el-form-item>
              <!-- 推广人 -->
              <el-form-item label="推广人">
                <el-select  v-model="formInline.promotion_code" placeholder="请选择推广人">
                  <el-option v-for="item in promoterslist" :key="item.id" :label="item.realname" :value="item.id"> </el-option>
                </el-select>
                <!-- <el-select  v-model="formInline.promoters" placeholder="请选择推广人">
                  <el-option v-for="item in promoterslist" :key="item.id" :label="item.realname" :value="item.identification_code"> </el-option>
                </el-select> -->
                <!-- <el-input v-model="formInline.promoters" placeholder=""></el-input> -->
              </el-form-item>
            </el-col>
            <!-- 搜索 -->
            <el-col :xs="4" :sm="4" :md="4" :lg="3" :xl="3">
              <el-row :gutter="0">
                <el-form-item>
                  <!-- <el-col :xs="12" :sm="12" :md="12" :lg="24" :xl="24"><el-button plain size="small" style="width: 100%;" @click="addStore">添加商家</el-button></el-col> -->
                  <el-col native-type='submit' :xs="12" :sm="12" :md="12" :lg="24" :xl="24"><el-button type="primary" size="small" style="width: 100%;margin-top: 20px;"  @click="onSubmit">搜索</el-button>
                  </el-col>
                </el-form-item>
              </el-row>
            </el-col>
          </el-row>
        </el-form>
        <!-- 搜索结果 -->
        <el-table :data="tableData" v-loading="loading" :highlight-current-row='true'>
          <!-- 商户code -->
          <el-table-column label="商户ID">
            <template slot-scope="scope">
              <span>{{ scope.row.store_code}}</span>
            </template>
          </el-table-column>
          <!-- 商家名称 -->
          <el-table-column label="商家名称">
            <template slot-scope="scope">
              <span>{{ scope.row.store_name }}</span>
            </template>
          </el-table-column>
          <!-- 商家类型 -->
          <el-table-column label="商家类型">
            <template slot-scope="scope">
              <span>{{ scope.row.store_type_desc ? scope.row.store_type_desc : '--' }}</span>
            </template>
          </el-table-column>

          <!-- 联系电话 -->
          <el-table-column label="联系方式">
            <template slot-scope="scope">
              <span>{{ scope.row.contact_name }}<br>{{ scope.row.mobile }}</span>
            </template>
          </el-table-column>
          <!-- 推广人 -->
          <el-table-column label="推广人">
            <template slot-scope="scope">
              <span>{{ scope.row.promotion_code ? scope.row.promotion_code : '--' }}</span>
            </template>
          </el-table-column>
          <!-- 服务项目 -->
          <el-table-column label="服务项目">
            <template slot-scope="scope">
              <!-- 支付宝 -->
              <a href="javascript:;">
                <img src="./../../public/img/alipay-select.png" class="server-item">
              </a>
              <!-- 微信 -->
              <a href="javascript:;">
                <img src="./../../public/img/weixin-unselect.png" class="server-item">
              </a>
              <!-- 银行卡 -->
              <a href="javascript:;">
                <img src="./../../public/img/bank-unselect.png" class="server-item">
              </a>
            </template>
          </el-table-column>
          <!-- 商家地址 
          <el-table-column label="商家地址">
            <template slot-scope="scope">
              <span>{{ scope.row.address ? scope.row.address : '--' }}</span>
            </template>
          </el-table-column>-->
          <!-- 商户设置操作 -->
          <el-table-column label="">
            <template slot-scope="scope">
              <el-button type="primary" plain icon="el-icon-setting" size="small" @click="setStore(scope.row.store_code,scope.row.id)">商户设置</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block text-center" style="background: #fff;padding: 0;" v-if="total > pageSize">
          <el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange" :total="total" :page-size='pageSize'>
          </el-pagination>
        </div>
    </div>
</template>

<script>
import api from './../../api/api';
import http from './../../config/index';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
export default {
  mounted: function () {
    // 获取推广人列表
    this.getpromoterslist();
    // 获取商家列表内容
    this.onSubmit();
  },
  data: function () {
    return {
      // 搜索表单
      formInline: {
        // 商家名称
        name: '',
        // 商家类型
        payType: '',
        // 负责人
        chargeMen: '',
        // 联系电话
        phone: '',
        // 推广人
        promotion_code: ''
      },
      // 每页数量
      pageSize: 10,
      // 总数
      total: 0,
      page: 1,
      // 商家类型
      payTypeOptions: [
        {
          value: 'all',
          label: '全部'
        },
        {
          value: 'alipay',
          label: '支付宝商家'
        },
        {
          value: 'weixin',
          label: '微信商家'
        },
        {
          value: 'back',
          label: '银行卡支付'
        }
      ],
      // 列表数据
      tableData: [],
      // 推荐人列表
      promoterslist: [],
      // 是否加载
      loading: false
    };
  },
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  methods: {
    // 提交表单
    onSubmit: function () {
      let that = this;
      that.page = 1;
      that.getData();
    },
    formatter (row, column) {
      return row.address;
    },
    handleCurrentChange (val) {
      this.page = val;
      this.getData();
    },
    filterTag (value, row) {
      return row.tag === value;
    },
    filterHandler (value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    // 商户设置
    setStore (code, id) {
      this.$router.push({
        path: '/store-set',
        query: {
          store_code: code,
          id: id
        }
      });
    },
    // 添加商户
    addStore () {
      this.$router.push({
        path: '/add-store'
      });
    },
    getData () {
      let that = this;
      that.loading = true;
      http.get(api.merchantList, {
        token: localStorage.getItem('token'),
        store_code: that.formInline.store_code,
        store_name: that.formInline.store_name,
        // 负责人
        contact_name: that.formInline.chargeMen,
        promotion_id: that.formInline.promotion_code,
        contact_phone: that.formInline.phone,
        pagesize: that.pageSize,
        page: that.page
      }, (res) => {
        console.log(res);
        console.log(66667);
        that.loading = false;
        if (res.code === '10001' && res.status === 'SUCCESS') {
          that.tableData = res.data[0].res.data;
          // that.total = res.data[0].total;
          that.total = res.data[0].res.total;
          return false;
        };
      }, (err) => {
        that.loading = false;
        console.log(err);
      });
    },
    getpromoterslist () {
      let that = this;
      // 获取推广人列表
      http.post(api.member, {
        token: localStorage.getItem('token')
      }, response => {
        console.log(response.data.result);
        if (response.code === '10001') {
          that.promoterslist = response.data;
        } else {
          that.$message.error(response.msg);
        }
      }, () => {
        console.log('网络错误');
        that.$message.error('网络错误,请稍后再试');
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.form
  padding: 2rem
  margin-top: 15px
  margin-bottom: 12px
  box-sizing: border-box
  background: #fff
  box-shadow: 1px 1px 1px #999
  .form-item
    display: inline-block
    margin-right: 35px
    label
      font-size: 14px
      color: #333
      width: 70px
      display: inline-block
    .form-input, .form-select
      width: 200px
  .line
    height: 15px
.server-item
  width: 20px
  height: 20px
  margin: 5px
</style>
